<script lang="ts" setup>
import { ref } from "vue";
import Echart from "@/components/Echart.vue";
import * as echarts from "echarts";
const data = [220, 182, 191, 234, 290, 330];
const sideData = data.map((item) => item + 4.5);
const option: any = ref({});
option.value = {
  grid: {
    left: "0%",
    right: "0%",
    bottom: "10%",
    top: "20%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    formatter: "{b} : {c}",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  legend: {
    data: [
      {
        name: "今年",
        // 强制设置图形为圆。
        icon: "circle",
        itemStyle:{
          color: "#00ffd2",
        }
      },
      {
        name: "去年",
        // 强制设置图形为圆。
        icon: "circle",
        itemStyle:{
          color: "#bfb7ff",
          width:'5px'
        }
      },
    ],
    show: true,
    textStyle: {
      color: "#fff",
    },
    icon: "circle",

    right: 0,
    top: 30,
  },
  xAxis: {
    data: ["2020年", "2021年", "2022年", "2023年", "2024年", "2025年"],
    //坐标轴
    axisLine: {
      lineStyle: {
        color: "#3eb2e8",
      },
    },
    //坐标值标注
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
  },
  yAxis: {
    //坐标轴
    axisLine: {
      show: false,
    },
    //坐标值标注
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
    //分格线
    splitLine: {
      lineStyle: {
        color: "#1b222f",
      },
    },
  },
  series: [
    {
      name: "今年",
      data: data,
      type: "line",
      smooth: true,
      lineStyle: {
        width: 2,
        color: "#15c5f8",
      },
      areaStyle: {
        //区域填充样式
        normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#15c5f850",
              },
              {
                offset: 1,
                color: "rgba(25,163,223, 0)",
              },
            ],
            false
          ),
          shadowColor: "#15c5f850", //阴影颜色
          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
      },
    },
    {
      name: "去年",
      data: [300, 200, 400, 220, 190, 330],
      type: "line",
      smooth: true,
      lineStyle: {
        width: 2,
        color: "#ffff52",
      },
      areaStyle: {
        //区域填充样式
        normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#ffff5250",
              },
              {
                offset: 1,
                color: "rgba(25,163,223, 0)",
              },
            ],
            false
          ),
          shadowColor: "#ffff5250", //阴影颜色
          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
      },
    },
  ],
};
</script>
<template>
  <Echart
    style="width: 100%; height: 240px; margin-top: -30px"
    :options="option"
  ></Echart>
</template>
<style scoped></style>
